<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-left">
        <!-- <el-input
          v-model="searchKey"
          placeholder="工时所有者"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
          @input="handleFilter"
        />
        <el-button
          v-waves
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >
          查询
        </el-button> -->
      </div>
      <div class="filter-right">
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="mini"
          @click="handleAdd"
        >
          新增工时
        </el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="pageList"
      border
      fit
      stripe
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="user_nick" label="工时所有者" align="center">
      </el-table-column>
      <el-table-column
        prop="projects_name"
        label="对应项目"
        align="center"
        width="300"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column prop="start_time" label="工时开始日期" align="center">
      </el-table-column>
      <el-table-column prop="end_time" label="工时结束日期" align="center">
      </el-table-column>
      <el-table-column
        prop="work_title"
        label="填报单名称"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column prop="work_amount" label="工时数量" align="center">
      </el-table-column>
      <!-- <el-table-column label="修改时间" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.updated_at | formate }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="remarks"
        :show-overflow-tooltip="true"
        label="备注"
        align="center"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleModify(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button
            @click="handleDelete(scope.row)"
            type="text"
            size="small"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getPageList"
    />

    <!-- 新增项目 -->
    <el-dialog
      title="新增工时"
      :visible.sync="dialogFormVisible"
      width="550px"
      :before-close="resetForm"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          label="工时填报单名称"
          label-width="120px"
          prop="workTitle"
        >
          <el-input
            v-model="form.workTitle"
            autocomplete="off"
            maxlength="50"
            @input="changeValue('workTitle', '50')"
            placeholder="请输入工时填报单名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="工时开始日期" label-width="120px" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            placeholder="选择日期"
            :picker-options="pickerOptionsStart"
            @change="handleEndDateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工时结束日期" label-width="120px" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            placeholder="选择日期"
            :picker-options="pickerOptionsEnd"
            @change="handleEndDateChange"
          >
          </el-date-picker>
          <div v-if="dateDay" style="line-height: 20px">
            已选<span style="color: red; font-weight: bold">{{ dateDay }}</span
            >天，共计工时为<span style="color: red; font-weight: bold">{{
              workHours
            }}</span>
            个小时，已填<span style="color: red; font-weight: bold">{{
              writeHours
            }}</span
            >个小时
          </div>
        </el-form-item>
        <div
          v-for="(items, index) in form.workArray"
          :key="index"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div>
            <el-form-item
              label="项目名称"
              label-width="120px"
              required
              :style="{
                width: '100%',
              }"
              :prop="`workArray[${index}].projectsId`"
              :rules="{
                required: true,
                message: '请选择项目',
                trigger: 'change',
              }"
            >
              <el-select
                v-model="items.projectsId"
                filterable
                clearable
                placeholder="请选择对应项目"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.project_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="工时数量"
              label-width="120px"
              required
              :style="{
                width: '100%',
              }"
              :prop="`workArray[${index}].workAmount`"
              :rules="[
                {
                  required: true,
                  message: '请输入工时数量',
                  trigger: 'blur',
                },
                {
                  required: true,
                  message: '请输入工时数量',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                v-model="items.workAmount"
                autocomplete="off"
                placeholder="请输入工时数量"
                @change="handleworkHours(items)"
                oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/[^0-9.]/g, '').replace(/^\./g, '').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');if(value>300)value=300;if(value<=0)value=null"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="备注"
              label-width="120px"
              :style="{
                width: '100%',
              }"
            >
              <el-input
              style="width: 100%;"
                type="textarea"
                rows="5"
                maxlength="200"
                @input="changeValue('remarks', '200')"
                resize="none"
                placeholder="请输入内容"
                v-model="items.remarks"
              >
              </el-input>
            </el-form-item>
          </div>
          <div>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              v-if="form.workArray.length > 1"
              @click="deleteItem(items, index)"
            ></el-button>
          </div>
        </div>
        <el-form-item label-width="120px" v-if="modifyShow">
          <el-button
            icon="el-icon-plus"
            @click="addItem(form.workArray.length)"
          ></el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog
      title="修改工时"
      :visible.sync="ModifydialogFormVisible"
      width="550px"
      :before-close="ModifyresetForm"
    >
      <el-form :model="modifyForm" :rules="rules" ref="modifyForm">
        <el-form-item
          label="工时填报单名称"
          label-width="120px"
          prop="workTitle"
        >
          <el-input
            v-model="modifyForm.workTitle"
            autocomplete="off"
            maxlength="50"
            @input="changeValue('workTitle', '50')"
            placeholder="请输入工时填报单名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="工时开始日期" label-width="120px" prop="startTime">
          <el-date-picker
            v-model="modifyForm.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            placeholder="选择日期"
            :picker-options="pickerOptionsStartModify"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工时结束日期" label-width="120px" prop="endTime">
          <el-date-picker
            v-model="modifyForm.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            placeholder="选择日期"
            :picker-options="pickerOptionsEndModify"
          >
          </el-date-picker>
        </el-form-item>
        <div>
          <el-form-item label="工时数量" label-width="120px" prop="workAmount">
            <el-input
              v-model="modifyForm.workAmount"
              autocomplete="off"
              placeholder="请输入工时数量"
              oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/[^0-9.]/g, '').replace(/^\./g, '').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');if(value>300)value=300;if(value<=0)value=null"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目名称" label-width="120px" required>
            <el-select
              v-model="modifyForm.projectsId"
              clearable
              filterable
              placeholder="请选择对应项目"
              style="width: 100%"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.project_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" label-width="120px">
            <el-input
              type="textarea"
              rows="5"
              maxlength="200"
              @input="changeValue('remarks', '200')"
              resize="none"
              placeholder="请输入内容"
              v-model="modifyForm.remarks"
            >
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ModifyresetForm('modifyForm')">取 消</el-button>
        <el-button type="primary" @click="ModifysubmitForm('modifyForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import {
  getWorkingPage,
  createdWorking,
  updateWorking,
  delWorking,
} from "@/api/workingHours";
import { checkUserToken } from "@/api/user";
import { getProjLists } from "@/api/order";
import { curentTime } from "@/filters/index";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  name: "Shop",
  components: { Pagination },
  directives: { waves },
  filters: {
    formate(date) {
      return curentTime(date);
    },
  },
  data() {
    return {
      // 工时数据
      pageList: [],
      // 工时总数
      total: 0,
      // 加载
      listLoading: true,
      // 查询参数
      listQuery: {
        pageNum: 1,
        pageSize: 10,
      },
      searchKey: "",
      // 表单控制
      dialogFormVisible: false,
      ModifydialogFormVisible: false,
      // 表单标题
      title: "",
      // 表单参数
      form: {
        workTitle: "",
        startTime: "",
        endTime: "",
        // 新增多选工时及项目名称
        workArray: [
          //默认显示一条
          {
            workAmount: "",
            projectsId: "",
            remarks: "",
          },
        ],
      },
      // 修改表单参数
      modifyForm: {
        id: "",
        workTitle: "",
        startTime: "",
        endTime: "",
        workAmount: "",
        projectsId: "",
        remarks: "",
      },
      // 修改添加按钮
      modifyShow: true,
      // 表单检验
      rules: {
        workTitle: [
          { required: true, message: "请输入工时填报单名称", trigger: "blur" },
        ],
        startTime: [
          {
            required: true,
            message: "请选择工时归属日期",
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请选择工时归属日期",
            trigger: "change",
          },
        ],
        workAmount: [
          { required: true, message: "请输入工时数量", trigger: "blur" },
        ],
        projectsId: [
          { required: true, message: "请选择对应项目", trigger: "change" },
        ],
        // remarks: [{ required: true, message: "请填写备注", trigger: "blur" }],
      },
      // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          // if (this.form.endTime) {
          //   return time.getTime() > new Date(this.form.endTime).getTime();
          // }
          const self = this;
          if (self.form.endTime) {
            const selectDate = new Date(self.form.endTime);
            const nowYear = selectDate.getFullYear(); // 当前年
            const nowMonth = selectDate.getMonth(); // 当前月
            const nowDate = selectDate.getDate(); // 当前几号
            const nowDay = selectDate.getDay(); // 当前星期几
            // 本月的开始时间
            const monthStartDate = new Date(nowYear, nowMonth, 1).getTime();
            // 本月的结束时间
            const monthEndDate = new Date(nowYear, nowMonth + 1, 0).getTime();
            // 本年的开始时间
            const yearStartDate = new Date(nowYear, 0, 1).getTime();
            // 本年的结束时间
            const yearEndDate = new Date(nowYear, 12, 0).getTime();
            // 本周的开始时间，本周的结束时间
            const weekStartDate = new Date(
              nowYear,
              nowMonth,
              nowDay ? nowDate - nowDay + 1 : nowDate - 7
            );
            const weekEndDate = new Date(
              nowYear,
              nowMonth,
              nowDay ? nowDate + (7 - nowDay) : nowDate
            );
            // 此处以不能跨月做示范
            return (
              time.getTime() > new Date(self.form.endTime).getTime() ||
              time.getTime() < weekStartDate ||
              time.getTime() > weekEndDate ||
              time.getTime() < monthStartDate ||
              time.getTime() > monthEndDate ||
              time.getTime() < yearStartDate ||
              time.getTime() > yearEndDate
            );
          }
        },
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          // if (this.form.startTime) {
          //   return (
          //     time.getTime() <
          //     new Date(this.form.startTime).getTime() - 86400000
          //   );
          // }
          const self = this;
          if (self.form.startTime) {
            const selectDate = new Date(self.form.startTime);
            const nowYear = selectDate.getFullYear(); // 当前年
            const nowMonth = selectDate.getMonth(); // 当前月
            const nowDate = selectDate.getDate(); // 当前几号
            const nowDay = selectDate.getDay(); // 当前星期几
            // 本月的开始时间
            const monthStartDate = new Date(nowYear, nowMonth, 1).getTime();
            // 本月的结束时间
            const monthEndDate = new Date(nowYear, nowMonth + 1, 0).getTime();
            // 本年的开始时间
            const yearStartDate = new Date(nowYear, 0, 1).getTime();
            // 本年的结束时间
            const yearEndDate = new Date(nowYear, 12, 0).getTime();
            // 本周的开始时间，本周的结束时间
            const weekStartDate = new Date(
              nowYear,
              nowMonth,
              nowDay ? nowDate - nowDay + 1 : nowDate - 7
            );
            const weekEndDate = new Date(
              nowYear,
              nowMonth,
              nowDay ? nowDate + (7 - nowDay) : nowDate
            );
            return (
              time.getTime() <
                new Date(self.form.startTime).getTime() - 86400000 ||
              time.getTime() < weekStartDate ||
              time.getTime() > weekEndDate ||
              time.getTime() < monthStartDate ||
              time.getTime() > monthEndDate ||
              time.getTime() < yearStartDate ||
              time.getTime() > yearEndDate
            );
          }
        },
      },

      // 开始结束日期限制
      pickerOptionsStartModify: {
        disabledDate: (time) => {
          // if (this.modifyForm.endTime) {
          //   return time.getTime() > new Date(this.modifyForm.endTime).getTime();
          // }
          const self = this;
          if (self.modifyForm.endTime) {
            const selectDate = new Date(self.modifyForm.endTime);
            const nowYear = selectDate.getFullYear(); // 当前年
            const nowMonth = selectDate.getMonth(); // 当前月
            const nowDate = selectDate.getDate(); // 当前几号
            const nowDay = selectDate.getDay(); // 当前星期几
            // 本月的开始时间
            const monthStartDate = new Date(nowYear, nowMonth, 1).getTime();
            // 本月的结束时间
            const monthEndDate = new Date(nowYear, nowMonth + 1, 0).getTime();
            // 本年的开始时间
            const yearStartDate = new Date(nowYear, 0, 1).getTime();
            // 本年的结束时间
            const yearEndDate = new Date(nowYear, 12, 0).getTime();
            // 本周的开始时间，本周的结束时间
            const weekStartDate = new Date(
              nowYear,
              nowMonth,
              nowDay ? nowDate - nowDay + 1 : nowDate - 7
            );
            const weekEndDate = new Date(
              nowYear,
              nowMonth,
              nowDay ? nowDate + (7 - nowDay) : nowDate
            );
            // 此处以不能跨月做示范
            return (
              time.getTime() > new Date(self.modifyForm.endTime).getTime() ||
              time.getTime() < weekStartDate ||
              time.getTime() > weekEndDate ||
              time.getTime() < monthStartDate ||
              time.getTime() > monthEndDate ||
              time.getTime() < yearStartDate ||
              time.getTime() > yearEndDate
            );
          }
        },
      },
      // 结束日期限制
      pickerOptionsEndModify: {
        disabledDate: (time) => {
          // if (this.modifyForm.startTime) {
          //   return (
          //     time.getTime() <
          //     new Date(this.modifyForm.startTime).getTime() - 86400000
          //   );
          // }
          const self = this;
          if (self.modifyForm.startTime) {
            const selectDate = new Date(self.modifyForm.startTime);
            const nowYear = selectDate.getFullYear(); // 当前年
            const nowMonth = selectDate.getMonth(); // 当前月
            const nowDate = selectDate.getDate(); // 当前几号
            const nowDay = selectDate.getDay(); // 当前星期几
            // 本月的开始时间
            const monthStartDate = new Date(nowYear, nowMonth, 1).getTime();
            // 本月的结束时间
            const monthEndDate = new Date(nowYear, nowMonth + 1, 0).getTime();
            // 本年的开始时间
            const yearStartDate = new Date(nowYear, 0, 1).getTime();
            // 本年的结束时间
            const yearEndDate = new Date(nowYear, 12, 0).getTime();
            // 本周的开始时间，本周的结束时间
            const weekStartDate = new Date(
              nowYear,
              nowMonth,
              nowDay ? nowDate - nowDay + 1 : nowDate - 7
            );
            const weekEndDate = new Date(
              nowYear,
              nowMonth,
              nowDay ? nowDate + (7 - nowDay) : nowDate
            );
            return (
              time.getTime() <
                new Date(self.modifyForm.startTime).getTime() - 86400000 ||
              time.getTime() < weekStartDate ||
              time.getTime() > weekEndDate ||
              time.getTime() < monthStartDate ||
              time.getTime() > monthEndDate ||
              time.getTime() < yearStartDate ||
              time.getTime() > yearEndDate
            );
          }
        },
      },
      // 项目数据
      options: [],
      // 日期所选天数
      dateDay: 0,
      workHours: 0,
      writeHours: 0,

      purchaseds: [
        { key: "1-700", value: "RN cream 15ml" },
        { key: "701-1800", value: "DMD serum" },
        { key: "1801-2600", value: "RN cream 50ml" },
        { key: "2601+", value: "RN set (serum+DMD eye)" },
        { key: "满级", value: "RN set (serum+DMD eye)" },
      ],
      rowSpanArr: [], //存储合并单元格的开始位置
      // 存放所有的表头 一定要与pageList一致
      colFields: [
        "user_nick",
        "projects_name",
        "start_time",
        "end_time",
        "work_title",
        "work_amount",
        "remarks",
      ],
    };
  },

  async created() {
    await this.getPageList();
  },
  async mounted() {
    await getProjLists().then((res) => {
      this.options = res.data;
    });
  },
  methods: {
    // 按需查询
    async handleFilter() {
      this.listQuery.searchKey = this.searchKey;
      this.listQuery.pageNum = 1;
      await this.getPageList();
    },

    // 查询工时数据
    async getPageList() {
      try {
        const res = await getWorkingPage(this.listQuery);
        res.data.lists.forEach((item) => {
          item.work_date = item.work_day;
        });
        this.total = res.data.total;
        // this.handleTableData(res.data.lists);
        this.pageList = res.data.lists;
        this.listLoading = false;
      } catch (error) {
        console.log(error);
      }
    },

    // 提交表单信息
    async submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createdWorking(this.form).then((res) => {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.resetForm("form");
            this.getPageList();
          });
        } else {
          return false;
        }
      });
    },

    ModifysubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateWorking(this.modifyForm).then((res) => {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.ModifyresetForm("modifyForm");
            this.getPageList();
          });
        } else {
          return false;
        }
      });
    },

    // 取消
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields();
      this.writeHours = 0;
      this.dateDay = 0;
      this.workHours = 0;
      this.form.workArray = [
        //默认显示一条
        {
          workAmount: "",
          projectsId: "",
        },
      ];
    },

    ModifyresetForm() {
      this.ModifydialogFormVisible = false;
      this.$refs.modifyForm.resetFields();
    },

    // 新增工时
    async handleAdd() {
      checkUserToken().then((res) => {
        if (res.data) {
          this.modifyShow = true;
          this.dialogFormVisible = true;
        }
      });
    },

    // 修改
    handleModify(row) {
      this.ModifydialogFormVisible = true;
      this.$nextTick(() => {
        this.modifyForm.id = row.id;
        this.modifyForm.workTitle = row.work_title;
        this.modifyForm.startTime = row.start_time;
        this.modifyForm.endTime = row.end_time;
        this.modifyForm.workAmount = row.work_amount;
        this.modifyForm.projectsId = row.projects_id;
        this.modifyForm.remarks = row.remarks;
      });
    },

    // 删除
    handleDelete(row) {
      this.$confirm("此操作将删除该工时表, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delWorking(row.id).then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getPageList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 所选天数
    handleEndDateChange() {
      var timeDay = 0;
      let day;

      let today = new Date(this.form.startTime);
      //格式化为年月日时分秒
      today.setHours(0, 0, 0, 0);
      if (this.form.endTime != null) {
        var timeDiff = new Date(this.form.endTime) - 0 - new Date(today) - 0;
        timeDay = timeDiff / 86400000;
      } else {
        timeDay = 0;
      }

      // 开始日期和结束日期不为空计算提示信息，若为空则清空提示信息
      if (this.form.startTime && this.form.endTime) {
        day = Number(timeDay * 1).toFixed(0);
        this.dateDay = Number(day) + 1;
        this.workHours = this.dateDay * 8;
      } else {
        day = "";
        this.dateDay = "";
        this.workHours = "";
      }
    },

    // 已填工时
    handleworkHours(hours) {
      this.writeHours = this.form.workArray.reduce(
        (acc, item) => acc + Number(item.workAmount),
        0
      );
    },

    // 输入字数限制
    changeValue(attr, byte) {
      //console.log('attr',attr) //传入的属性
      let value = this.form[attr]; //校验的字段
      // 中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算
      let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
      let maxLimitStr = byte; //25个汉字
      let pass = true;
      let substringStr = "";
      let length = 0;
      let strArr = value.split("");
      strArr.map((str) => {
        if (pass) {
          if (cnReg.test(str)) {
            //中文
            length++;
          } else {
            //英文
            length += 0.5;
          }
          //大于最大限制的时候
          if (length > maxLimitStr) {
            pass = false;
            //将校验的字符截取返回
            this.form[attr] = substringStr;
          } else {
            substringStr += str;
          }
        }
      });
      return pass;
    },

    handleValueChange(value) {
      // 限制输入1-365
      if (value < 1) {
        this.form.workAmount = 1;
      } else if (value > 300) {
        this.form.workAmount = 300;
      }
      // 针对为两位数时个位数是否为0做处理
      if (value.length === 2) {
        const arr = value.split("");
        if (arr[0] === "0") {
          this.form.workAmount = arr[1];
        }
      }
    },

    //新增方法
    addItem() {
      this.form.workArray.push({
        workAmount: "",
        projectsId: "",
      });
    },

    //删除方法
    deleteItem(item, index) {
      this.form.workArray.splice(index, 1);
    },
    /**
     * 分析每一列，找出相同的
     * @param data
     */
    // 这里只放了部分代码,除了加了个if,其他代码和上面的一样
    // 获取相同名称的个数 tableData: 表格的数据, projectName: 确定相同的参数
    handleTableData(tableData) {
      let rowSpanArr = [],
        position = 0;
      for (let [index, item] of tableData.entries()) {
        if (index == 0) {
          rowSpanArr.push(1);
          position = 0;
        } else {
          if (item.projects_name == tableData[index - 1].projects_name) {
            rowSpanArr[position] += 1; //项目名称相同，合并到同一个数组中
            rowSpanArr.push(0);
          } else {
            rowSpanArr.push(1);
            position = index;
          }
        }
      }
      this.rowSpanArr = rowSpanArr;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      
      if (columnIndex === 0) {
        // 就是只保留第一行，其他直接不要，然后行数是列表长度
        if (rowIndex === 0) {
          let rowspan = this.pageList.length;
          return {
            rowspan,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }else if (columnIndex === 1) {
        const rowSpan = this.rowSpanArr[rowIndex];
        return {
          rowspan: rowSpan, //行
          colspan: 1, //列
        };
      }
    },
  },
};
</script>
  
  
  <style lang="scss" scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
}
</style>
  
  